<script lang="ts" setup>
  import { provide, ref, computed } from "vue";

  const props = withDefaults(
    defineProps<{
      defaultActiveTab?: string;
      items?: any[];
      direction?: string;
      bgColor?: string;
    }>(),
    {
      direction: "horizontal",
      items: [] as any,
    }
  );

  const activedKey = ref(props.defaultActiveTab);
  const tabs = ref<any[]>(props.items);

  provide("activedKey", activedKey);
  provide("tabs", tabs);

  // onBeforeMount(() => {
  //     tabs.value = []
  // })

  const handleClick = (key: any) => {
    activedKey.value = key;
  };

  const tabStyles = computed(() => {
    return {
      backgroundColor: props.bgColor,
    };
  });

  const headerClassNames = computed(() => {
    return {
      "umrp-tabs-header": true,
      "umrp-tabs-vertical": props.direction === "vertical",
    };
  });
</script>

<template>
  <div class="umrp-tabs" :style="tabStyles">
    <div :class="headerClassNames">
      <div v-for="item in tabs" class="umrp-tabs-title" :class="{ 'umrp-tabs-actived': item.key === activedKey }" @click="handleClick(item.key)">{{ item.title }}</div>
    </div>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-tabs {
    &-header {
      display: flex;
    }

    &-vertical {
      flex-direction: column;
    }

    &-title {
      padding: 6px 10px 6px;
      cursor: pointer;
    }

    &-actived {
      color: #007bff;
      position: relative;

      &::after {
        position: absolute;
        content: " ";
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 2px;
        background-color: #007bff;
        border-radius: 10px;
      }
    }
  }
</style>
